<template>
<view>
	<view class="content">
		<view class="grid-item">
			<text class="iconfont icon-meishi"></text>
		</view>
		<view class="grid-item">
			<text class="iconfont icon-zhuangxiu"></text>
			<view>装修</view>
		</view>
		<view class="grid-item">
			<text class="iconfont icon-xiyu"></text>
			<view>洗浴</view>
		</view>
		<view class="grid-item">
			<text class="iconfont icon-qiche"></text>
			<view>汽车</view>
		</view>
		<view class="grid-item">
			<text class="iconfont icon-changge"></text>
			<view>唱歌</view>
		</view>
		<view class="grid-item">
			<text class="iconfont icon-zhusu"></text>
			<view>住宿</view>
		</view>
		<view class="grid-item">
			<text class="iconfont icon-boshimao"></text>
			<view>学习</view>
		</view>
		<view class="grid-item">
			<text class="iconfont icon-shiwu-gongwenbao"></text>
			<view>工作</view>
		</view>
		<view class="grid-item">
			<text class="iconfont icon-jiehunchoubei"></text>
			<view>结婚</view>
		</view>
	</view>
</view>	
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>
<style lang="scss">
	@import"/static/iconfont/iconfont.css";
	.content{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		grid-template-rows: repeat(3,1fr);
		gap: 1rpx;
		padding: 1rpx;
	}
	.grid-item{
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100px;
		border: 1rpx solid rgb(219,219,219);
	}
	.iconfont{
		box-sizing: border-box;
		padding: 30rpx 24rpx;
		display: block;
		font-size: 72rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
</style>

